<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
* Polymer Elements
* @module Polymer Elements
* @main Polymer Elements
*/  
/**
 * g-icon is a 24x24 glyph expressed as a background-image.
 *
 * Example:
 *
 *     <g-icon src="star.png"></g-icon>
 *
 * Optionally can use other size like 32x32 by setting the attribute "size" to "32":
 *
 *     <g-icon src="big_star.png" size="32"></g-icon>
 *
 * @class g-icon
 */
-->
<polymer-element name="g-icon" attributes="src size">
  <template>
    <style>
      @host {
        * {
          display: inline-block;
          vertical-align: middle;
        }
      }

      #icon {
        width: 24px;
        height: 24px;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
      }
    </style>
    <div id="icon" style="background-image:url({{src}}); width:{{size}}px; height:{{size}}px"></div>
  </template>
  <script>
    Polymer('g-icon', {
      /**
       * The URL of an image for the icon.
       *
       * @attribute src
       * @type string
       * @default ''
       */
      src: '',
      /**
       * Specifies the size of the icon.
       *
       * @attribute size
       * @type string
       * @default 24
       */
      size: 24
    });
  </script>
</polymer-element>
